<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
	<title>五子棋</title>
	<link rel="stylesheet" type="text/css" href="reset.css" />
	<link rel="stylesheet" type="text/css" href="fivechess.css" />
	<script type="text/javascript" src="jquery-1.7.2.js"></script>
	<script type="text/javascript" src="CookieHandle.js"></script>
	<script type="text/javascript" src="fivechess.js"></script>
</head>
<body>
<div class="wrapper">
	<div class="chessboard">
		<!-- top line -->
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top"></div>
		<div class="chess-top chess-right"></div>
		<!-- line 1 -->
		<div class="chess-left"></div>		
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 2 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 3 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 4 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 5 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 6 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 7 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 8 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 9 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 10 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 11 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 12 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- line 13 -->
		<div class="chess-left"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-middle"></div>
		<div class="chess-right"></div>
		<!-- bottom line  -->
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom"></div>
		<div class="chess-bottom chess-right"></div>
	</div>

	<div class="operating-panel">
		<p>
			<a id="black_btn" class="btn selected" href="#">黑&nbsp;&nbsp;子</a>
			<a id="white_btn" class="btn" href="#">白&nbsp;&nbsp;子</a>
		</p>
		<p>
			<a id="first_move_btn" class="btn selected" href="#">先&nbsp;&nbsp;手</a>
			<a id="second_move_btn" class="btn" href="#">后&nbsp;&nbsp;手</a>
		</p>
		<a id="replay_btn" class="btn" href="#">开&nbsp;&nbsp;&nbsp;始</a>
		<p id="result_info">胜率：100%</p>
		<p id="result_tips"></p>
	</div>

	<div style="display: none">
		<!-- 图片需合并 减少http请求数 -->
		<img src="black.png" alt="preload" />
		<img src="white.png" alt="preload" />
		<img src="hover.png" alt="preload" />
		<img src="hover_up.png" alt="preload" />
		<img src="hover_down.png" alt="preload" />
		<img src="hover_up_left.png" alt="preload" />
		<img src="hover_up_right.png" alt="preload" />
		<img src="hover_left.png" alt="preload" />
		<img src="hover_right.png" alt="preload" />
		<img src="hover_down_left.png" alt="preload" />
		<img src="hover_down_right.png" alt="preload" />
		<img src="black_last.png" alt="preload" />
		<img src="white_last.png" alt="preload" />
	</div>
</div>
</body>
</html>



